<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>周元达—面试前端开发—2019</title>
    <link rel="stylesheet" href="./css/main.css" media="(min-width:426px)">
    <link rel="stylesheet" href="./css/phone.css" media="(max-width:425px)">
    <link rel="stylesheet" href="./css/print.css" media="print">
</head>

<body>
    <div id="page" class="layout">
        <header>
            <div class="resume-link">
                <a href="https://adashuai5.github.io/resume/">简历在线版</a>
            </div>
            <h1>周 元 达</h1>
            <p>应聘 Web 前端开发</p>
        </header>
        <aside>
            <div class="avader">
                <img src="./img/avader.PNG" alt="头像">
            </div>
            <section>
                <div class="personal">
                    <h2>基本信息</h2>
                    <div class="item">
                        <span>学历</span>
                        <span>本科</span>
                    </div>
                    <div class="item">
                        <span>英语</span>
                        <span>CET-4</span>
                    </div>
                    <div class="item">
                        <span>毕业时间</span>
                        <span>2018.7</span>
                    </div>
                    <div class="item">
                        <span>年龄</span>
                        <span>23</span>
                    </div>
                </div>
            </section>
            <section>
                <div class="skills">
                    <h2>相关技能</h2>
                    <div class="item">
                        <p class="keyword">JavaScript/ HTML 5/ CSS 3/ SVG</p>
                        <p class="rule"><i style="width: 75%"></i></p>
                    </div>
                    <div class="item">
                        <p class="keyword">Vue.js/ Vuex/ Vue Router/ Axios</p>
                        <p class="rule"><i style="width: 65%"></i></p>
                    </div>
                    <div class="item">
                        <p class="keyword">Node.js</p>
                        <p class="rule"><i style="width: 40%"></i></p>
                    </div>
                    <div class="item">
                        <p class="keyword">Webpack/ Parcel/ Npm Script</p>
                        <p class="rule"><i style="width: 70%"></i></p>
                    </div>
                    <div class="item">
                        <p class="keyword">ES6/ Sass、Less/ Babel</p>
                        <p class="rule"><i style="width: 73%"></i></p>
                    </div>
                </div>
            </section>
            <section>
                <div class="contact">
                    <h2>联系方式</h2>
                    <div class="item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-phone"></use>
                        </svg>
                        <span>15757303465</span>
                    </div>
                    <div class="item">
                        <svg class="icon" aria-hidden="true" style="fill:red;">
                            <use xlink:href="#icon-wechat"></use>
                        </svg>
                        <span>873606339</span>
                    </div>
                    <div class="item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-mail"></use>
                        </svg>
                        <span>yd.zhou@foxmail.com</span>
                    </div>
                    <div class="item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>
                        <span>宁波</span>
                    </div>
                </div>
            </section>
            <section>
                <div class="more">
                    <h2>了解更多</h2>
                    <div class="item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-blog"></use>
                        </svg>
                        <span class="link"><a href="https://adashuai5.github.io/">个人博客主页</a></span>
                    </div>
                    <div class="item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-github"></use>
                        </svg>
                        <span class="link"><a href="https://github.com/Adashuai5/">访问 GitHub</a></span>
                    </div>
                    <div class="item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhihu"></use>
                        </svg>
                        <span class="link"><a
                                href="https://www.zhihu.com/people/zhouyuanda/activities">浏览知乎主页</a></span>
                    </div>
                </div>
            </section>
        </aside>
        <main>
            <section>
                <h2>项目经历</h2>
                <div class="item">
                    <h3>Wheels-ada UI</h3>
                    <img src="./img/wheels-ada.png" alt="wheels-ada">
                    <ul>
                        <li>
                            <strong>项目介绍：</strong>该项目是参照 Framework7、Ant Design、Element UI、iView 等 UI 库思路，做的一个基于 Vue
                            的简易<span class="highlight"> UI
                                组件库</span>，目前已支持按钮、输入框、网格、布局、Toast、Tabs、Popover、手风琴等组件。每个组件均经历从<span
                                class="highlight">需求分析</span>到<span class="highlight">
                                Mocha 单元测试</span>，并用<span class="highlight"> TravisCI
                                实现持续集成</span>，最终以 VuePress 为基础<span class="highlight">制作官方文档</span>，发布于
                            npmjs.org。完成该项目使我对 Vue
                            的常用特征更加熟悉，同时提升了自己对<span class="highlight">前端工程化流程以及单元测试重要性的深刻理解</span>，近一步开源文化。
                        </li>
                        <li><strong>技术：Vue.js/ VuePress/ ES6/ Parcel/ Npm Scripts/ Mocha/ SCSS/ TravisCI</strong></li>
                        <li><strong>项目源码：</strong><a
                                href="https://github.com/Adashuai5/wheels-ada/">github.com/Adashuai5/wheels-ada</a></li>
                        <li><strong>浏览链接：</strong><a
                                href="https://adashuai5.github.io/wheels-ada/">adashuai5.github.io/wheels-ada</a></li>
                    </ul>
                </div>
                <div class="item">
                    <h3>共享博客平台</h3>
                    <img src="./img/blog-client.png" alt="Vue-Blog">
                    <ul>
                        <li>
                            <strong>项目介绍：</strong>该项目使用 Vue 实现了一个在线博客分享的平台。包含<span
                                class="highlight">首页、用户文章列表、个人管理</span>等页面，实现了<span
                                class="highlight">登录、注册、编辑、发布</span>等功能。项目使用<span class="highlight">
                                Grid </span>作页面布局，以 Vue CLI 为基础创建项目模版，使用 Less 作<span class="highlight"> CSS
                                预处理</span>，引用
                            Element UI 作<span class="highlight">交互</span>。通过 Vue
                            Router 实现<span class="highlight">路由的跳转、异步加载、权限验证</span>等，通过
                            vuex 实现<span class="highlight">状态管理</span>，用<span class="highlight"> Axios
                                获取数据</span>，并对<span class="highlight">接口进行了封装</span>。
                        </li>
                        <li><strong>技术栈：Vue CLI/ Vue2/ Axios/ Vue Router/ Vuex/ ES6/ Npm/ Grid/ Less</strong></li>
                        <li><strong>项目源码：</strong><a
                                href="https://github.com/Adashuai5/Vue-Blog/">github.com/Adashuai5/Vue-Blog</a></li>
                        <li><strong>浏览链接：</strong><a
                                href="https://adashuai5.github.io/Vue-Blog/">adashuai5.github.io/Vue-Blog</a></li>
                    </ul>
                </div>
                <div class="item">
                    <h3>CNode 社区</h3>
                    <img src="./img/cnode-ada.png" alt="cnode-ada">
                    <ul>
                        <li>
                            <strong>项目介绍：</strong>该项目使用 Vue 还原 CNode 官方社区，项目调用 CNode
                            官方社区提供的 API，以 Vue CLI 创建项目模版，使用
                            Axios 获取数据，使用 Vue Router 进行<span class="highlight">前端路由的切换及传参</span>，使用<span
                                class="highlight">
                                watch 监听路由的变化</span>，Webpack 打包。
                        </li>
                        <li><strong>技术栈：Vue CLI/ Vue2/ Vue Router/ Axios/ ES6/ Npm/ SCSS</strong></li>

                        <li><strong>项目源码：</strong><a
                                href="https://github.com/Adashuai5/cnode-ada/">github.com/Adashuai5/cnode-ada</a></li>
                        <li><strong>浏览链接：</strong><a
                                href="https://adashuai5.github.io/cnode-ada/">adashuai5.github.io/cnode-ada</a></li>
                    </ul>
                </div>
                <div class="item">
                    <h3>小程序：遍历翻译</h3>
                    <img src="./img/mini-programs.png" alt="mini-programs">
                    <ul>
                        <li>
                            <strong>项目介绍：</strong>一款提供翻译功能的<span class="highlight">微信小程序</span>，遍历有浏览所有翻译历史之意。该项目以百度翻译
                            API
                            为服务器域名提供支持，主要包含<span class="highlight">翻译首页、语言列表页和翻译历史页</span>。项目逻辑简单，页面清新，提供了近 20
                            种语言选择，欢迎尝试。
                        </li>
                        <li><strong>项目源码：</strong><a
                                href="https://github.com/Adashuai5/mini-programs/">github.com/Adashuai5/mini-programs</a>
                        </li>
                        <li><strong>浏览项目：</strong>微信搜索小程序——遍历翻译或扫描示例图（PDF 版本不显示）中二维码</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>可爱皮卡丘</h3>
                    <img src="./img/Pikachu.png" alt="Pikachu">
                    <ul>
                        <li>
                            <strong>项目介绍：</strong>是一个使用<span class="highlight">纯原生 JS </span>开发的，动态显示 CSS
                            画一个皮卡丘过程的小作品。该作品主要思路是通过<span class="highlight">间隔计时器遍历预先设置在 preview
                                标签内代码</span>，将其一个个显示在页面上，并在 style 标签上作同样处理，以使代码 CSS 生效。此外，实现了 CSS 高亮效果及调速功能。
                        </li>
                        <li><strong>项目源码：</strong><a
                                href="https://github.com/Adashuai5/Pikachu/">github.com/Adashuai5/Pikachu</a></li>
                        <li><strong>浏览链接：</strong><a
                                href="https://adashuai5.github.io/Pikachu/">adashuai5.github.io/Pikachu</a></li>
                    </ul>
                </div>
                <div class="item">
                    <h3>简易在线画板</h3>
                    <img src="./img/canvas.png" alt="canvas">
                    <ul>
                        <li>
                            <strong>项目介绍：</strong>是一个使用<span class="highlight">纯原生 JS </span>开发的，主要利用 HTML 5 的<span
                                class="highlight"> Canvas API
                            </span>，是我在学习原生
                            JS 及 Canvas
                            过程中开发的小工具。
                            其提供在<span class="highlight"> PC 及手机端</span>在线画画、橡皮擦、画笔调色、画作删除等功能，并支持画作下载。
                        </li>
                        <li><strong>项目源码：</strong><a
                                href="https://github.com/Adashuai5/Canvas-ada/">github.com/Adashuai5/Canvas-ada</a></li>
                        <li><strong>浏览链接：</strong><a
                                href="https://adashuai5.github.io/Canvas-ada/">adashuai5.github.io/Canvas-ada</a></li>
                    </ul>
                </div>
            </section>
            <div class="line"></div>
            <section>
                <h2>关于我</h2>
                <p>熟练 HTML、DIV + CSS 的<span class="highlight">页面布局</span>，能根据设计图<span class="highlight">像素级</span>完成页面制作</p>
                <span>熟悉 HTML 5 及<span class="highlight">语义化</span>，了解<span class="highlight"> Canvas </span>动画制作，掌握 CSS
                    3 <span class="highlight">动画、过渡效果</span>等常用技术</span>
                <p>熟悉原生 JavaScript，会使用<span class="highlight"> ES6+ </span>常用规范，了解<span class="highlight">
                        TypeScript</span>，了解
                    jQuery 常用 API 及思想</p>
                <p>熟悉 Vue 常用功能，理解如<span class="highlight">生命周期、组件、虚拟 DOM、数据响应式</span>等概念，能够使用 Vue 全家桶开发项目，对 React 有一定了解
                </p>
                <p>熟悉<span class="highlight">模块化、工程化开发</span>流程，能够配置 Webpack</p>
                <p>有移动端开发经验，会使用<span class="highlight">REM、vw/ vh、响应式</span> 等技术制作适配手机设备的页面</p>
                <p>了解<span class="highlight"> HTTP </span>相关知识，了解常见的<span class="highlight"> Web 性能优化</span>方案</p>
                <p>了解 <span class="highlight">Node.js</span>，能够开发简单的后台服务器</p>
                <p>熟练使用<span class="highlight"> VsCode、WebStorm、Sass、Git </span>等开发工具</p>
            </section>
            <section>
                <h2>个人经历</h2>
                <div class="experience">
                    <p>2018 年 7 月毕业于嘉兴学院，在校期间成绩优异，曾多次获奖学金。<br>
                        毕业后就职宁波酶赛生物工程有限公司，从事本科时就读的生物工程专业相关工作。<br>
                        工作期间接触了前端，发现自己热爱技术，迄今为止利用所有业余时间自学前端近一年。<br>
                        热爱 coding，享受调试代码及解决 bug 的过程，享受通过各种代码组合实现自己成果的过程。有良好的代码规范，热衷分享，崇尚开源文化。</p>
                </div>
            </section>
        </main>
        <footer>
            <a href="http://www.freepik.com/">Designed by M.salama / Freepik</a>
        </footer>
    </div>
    <script src="//at.alicdn.com/t/font_963522_ysjp62qwni.js"></script>
</body>

</html>